<body></body>
<script>
  // 用一个全局变量存储被注册的副作用函数
  let activeEffect
  const bucket = new WeakMap()
  function effect(fn) {
    const effectFn = () => {
      // 当 effectFn执行时，将其设置为与当前激活的作用函数
      activeEffect = effectFn
      fn()
    }
    effectFn.deps = [] //用来存储所有与该副作用函数相关联的以来集合,activeEffect.deps
    effectFn()
  }
  const obj = new Proxy(data, {
    get(target, key) {
      track(target, key) //将副作用函数activeEffect 添加到存储副作用函数的桶中
      return target[key]
    },
    set(target, key, newVal) {
      target[key] = newVal //把副作用函数从桶里取出并执行
      trigger(target, key, newVal)
    },
  })
  //在 get 拦截函数内调用 track 函数追踪变化
  function track(target, key) {
    if (!activeEffect) return target[key]
    let depsMap = bucket.get(target)
    !depsMap && bucket.set(target, (depsMap = new Map())) //设置 target存储
    let deps = depsMap.get(key)
    !deps && depsMap.set(key, (deps = new Set())) //设置 target[key]存储Set
    deps.add(activeEffect) //把当前激活的副作用函数添加到依赖集合 deps中
    activeEffect.deps.push(deps) // ——————新代码
  }
  //在 set 拦截函数内调用 trigger 函数触发变化
  function trigger(target, key, newVal) {
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    effects && effects.forEach((fn) => fn())
  }
</script>
